import { defineStore } from "pinia";
import { computed, ref } from "vue";

export const useAlertsStore = defineStore("alerts", {
  // 状态变量
  state() {
    return {
      count: 0,
      firstName: "li",
      lastName: "jack",
      gender: 1,
    };
  },
  // 计算属性
  getters: {
    // cnGedner: (state) => (state.gender === 1 ? "男" : "女"),
    cnGedner: (state) => ({ 1: "男", 2: "女" }[state.gender]),
    fullName: (state) => `${state.lastName} ${state.firstName}`,
    g1: (state) => state.cnGedner + state.fullName,
    g2: () => {
      return (x, y) => x + y;
    },
  },
  // 方法
  actions: {
    increment() {
      this.count++;
    },
    add(x, y) {
      return x + y;
    },
  },
  persist: true,
});

export const useUsersStore = defineStore(
  "users",
  () => {
    // state
    const count = ref(0);
    // getter
    const firstName = ref("zhang");
    const lastName = ref("jack");
    const fullName = computed(() => `${lastName.value} ${firstName.value}`);
    // 访问
    const alertsStore = useAlertsStore();
    // console.log(alertsStore.g1);
    console.log(alertsStore.add(100, 200));

    // action
    function increment() {
      count.value++;
    }
    return {
      count,
      fullName,
      increment,
      lastName,
      firstName,
    };
  },
  {
    persist: true,
  }
);

/* export const useFormsStore = defineStore("forms", {
  state() {
    return {
      username: "jack",
      hobby: ["css", "html"],
    };
  },
  actions:{
    add(){
      const alertsStore = useAlertsStore();
      console.log(alertsStore.g1);
    }
  }
}); */

export const useFormsStore = defineStore("forms", () => {
  const username = ref("jack");
  const hobby = ref(["css", "js"]);

  function $reset() {
    username.value = "jack";
    hobby.value = ["css", "js"];
  }
  return {
    username,
    hobby,
    $reset,
  };
});
